<template>
  <div>
      <ul>
          <li v-for="(v,i) in arr" :key="i">
              <div class="left">
                    <img :src="v.img" alt="">
              </div>
              <div class="right">
                <h1>{{v.name}}</h1>
                <div class="bottom">
                    <p>急速退款</p>
                    <p><span>{{v.price}}</span><i>已拼{{v.num}}件</i></p>
                </div>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[{img:"/list/1.png",name:"白菜价[400张/大包]原生木浆抽纸巾整箱批发",price:"$6",num:10000},{img:"/list/2.png",name:"[超8千人收藏]足跟痛脚跟痛足底筋膜炎跟腱炎脚后跟骨刺",price:"$28",num:10000},{img:"/list/1.png",name:"白菜价[400张/大包]原生木浆抽纸巾整箱批发",price:"$6",num:10000},{img:"/list/2.png",name:"[超8千人收藏]足跟痛脚跟痛足底筋膜炎跟腱炎脚后跟骨刺",price:"$28",num:10000},{img:"/list/1.png",name:"白菜价[400张/大包]原生木浆抽纸巾整箱批发",price:"$6",num:10000},{img:"/list/2.png",name:"[超8千人收藏]足跟痛脚跟痛足底筋膜炎跟腱炎脚后跟骨刺",price:"$28",num:10000},]
        }
    }
}
</script>

<style scoped>
    ul{
        width: 4rem;
        margin:0.1rem auto 0;
    }
    li{
        display: flex;
        justify-content: space-between;
    }
    li h1{
        font-size: 0.14rem;
        line-height: 0.22rem;
    }
    li .right{
        padding:0.1rem;
        width:2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .bottom p:first-of-type{
        font-size: 0.13rem;
        color:#a6a6a6;
    }
    .bottom p:last-of-type span{
        color:#cb3f3d;
        margin-right:0.1rem;
        font-size: 0.16rem;
    }
    .bottom p:last-of-type i{
        color:#aeaeae;
        font-size: 0.12rem;
    }
</style>